import Taro, {Component, Config} from "@tarojs/taro";
import {inject, observer} from '@tarojs/mobx'
import {View, Image, Text} from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {getRuntime, ServerHost, pageSize, getAvatar, subtime} from '../../utils/common'
import '../order/index.less'
import './profit.less'

import bg_19 from "../../assets/img/bg_19.jpg";
import bg_18 from "../../assets/img/bg_18.jpg";
import img_11 from "../../assets/img/img_11.png";
import noneIcon from "../../assets/img/none_order.png";
import {SingleUserMallUsersVOBaoBiaoVO, SingleUserMallUsersVOOrderTj} from "../../api/api";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class MineProfit extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: [] as SingleUserMallUsersVOOrderTj[],
    totalCount: 0,
    pageIndex: 1,
    pageSize,
    info: {},
    resNum: {} as SingleUserMallUsersVOBaoBiaoVO,
    userInfo: getRuntime().getUserInfo(),
    userCashRate: 0, // 用户提现手续费
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'我的收益' })
    this.getOrderReport()
    this.getUserInfoFromHost()
  }

  getUserInfoFromHost() {
    let { userStore } = this.props.stores
    let temp = this.state.userInfo
    userStore.getUserInfo({
      callback: res => {
        // getRuntime().setStorage('user', res) // 此处返回的信息未带token
        res.token = temp.token
        getRuntime().setUserInfo(res)
        this.setState({
          userInfo: res,
        })
      }
    })
  }

  getOrderReport() {
    let { userStore } = this.props.stores
    let { pageIndex, pageSize } = this.state
    userStore.getOrderReport({
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: res.orderTj.totalCount, items: res.orderTj.items, resNum: res})
        }else {
          const { items } = this.state;
          items.push(...res.orderTj.items || []);
          this.setState({totalCount: res.orderTj.totalCount, items, resNum: res})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getOrderReport()
      })
    }
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  linkCash(url: string = '/pages/index/index'): void {
    let { userInfo } = this.state
    if(userInfo.commision <= 100) {
      getRuntime().showToast('您的金额小于100元，需要满足100元才能提现!'); return;
    }
    getRuntime().navigateTo(url)
  }

  render() {
    let { items, info, userInfo, userCashRate, resNum } = this.state
    return (
      <View className='mine-profit'>
        <View className='mine-profit__header'>
          <View className='line '>
            <Text className='tip'>可提现收益(元)</Text>
            <View className='log line-white-link' onClick={this.link.bind(this,'/pages/mine/profitRecord')}>提现记录</View>
          </View>
          <View className='line'>
            <Text className='money'>{userInfo.commision}</Text>
          </View>
          <View className='line line-item'>
            <View className='item'>
              <Text className='item-tip'>今日收益(元)</Text>
              <Text className='item-money'>{resNum.toDayProfit||0}</Text>
            </View>
            <View className='item'>
              <Text className='item-tip'>昨日收益(元)</Text>
              <Text className='item-money'>{resNum.yesterDayProfit||0}</Text>
            </View>
            <View className='item'>
              <Text className='item-tip'>累计收益(元)</Text>
              <Text className='item-money'>{resNum.totalProfit||0}</Text>
            </View>
          </View>
          <View className='line line-item'>
            <View className='item'>
              <Text className='item-tip'>已提现收益(元)</Text>
              <Text className='item-money'>{resNum.cashedSum||0}</Text>
            </View>
            <View className='item'>
              <Text className='item-tip'>本月收益(元)</Text>
              <Text className='item-money'>{resNum.thisMonthProfit||0}</Text>
            </View>
            <View className='item'>
              <Text className='item-tip'>上月收益(元)</Text>
              <Text className='item-money'>{resNum.lastMonthProfit||0}</Text>
            </View>
          </View>
          <View className='line line-item ' style={{marginBottom: 0}}>
            <View className='item'>
              <Text className='item-tip'>累计单数</Text>
              <Text className='item-money'>{resNum.totalNum||0}</Text>
            </View>
            <View className='item'>
              <Text className='item-tip'>本月单数</Text>
              <Text className='item-money'>{resNum.thisMonthNum||0}</Text>
            </View>
            <View className='item'>
              <Text className='item-tip'>上月单数</Text>
              <Text className='item-money'>{resNum.lastMonthNum||0}</Text>
            </View>
          </View>
        </View>

        <View className='mine-profit__main'>
          {
            items.length<=0&&
            <View className='none' style={{backgroundColor: '#fff'}}>
             <Image className='none-icon' src={noneIcon} />
             <View className='none-tips'>暂时还没有任何收益记录！</View>
            </View>
          }
          {
            items.length>0&&
            <View className='list-01'>
              {
                items.map(item => {
                  let tpl =  <View className='list-01__item' onClick={this.link.bind(this, item)}>
                    <View className='list-01__line'>
                      <View className='list-01__title'>
                        <Text className='list-01__spec'>订单号：{item.orderNo}</Text>
                        {/* <Text className='list-01__spec'>{item.userName}</Text>*/}
                      </View>
                      <View className='list-01__price color-theme' style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                        <Text>收益：</Text>
                        <Text className='small color-theme'> ￥</Text>
                        <Text className='price color-theme'>{item.profit}</Text>
                      </View>
                    </View>
                    <View className='list-01__line'>
                      <View className='list-01__carId color-theme' style={{width: '140px'}}>用户名：{item.nickName}</View>
                      <View className='list-01__date font-dark'>下单时间：{subtime(item.payTime)}</View>
                    </View>
                  </View>
                  return tpl
                })
              }
            </View>
           /* <View className='list-02'>
              {
                items.map(item => {
                  /!*return(
                    {/!*<View className='list-02__item'>
                      <Image className='list-02__avatar' src={getAvatar(userInfo.avatar)} />
                      <View className='list-02__info'>
                        <View className='list-02__title'>{item.userName} {item.rebateExplain}</View>
                        <View className='list-02__date font-dark'>{subtime(item.creationTime)}</View>
                      </View>
                      <View className='list-02__profit color-theme price'>+{item.rebateNum}</View>
                    </View>*!/}
                  )*!/
                })
              }
            </View>*/
          }
        </View>
        <View className='footer-block' />
        <View className='page-submit' onClick={this.linkCash.bind(this,'/pages/mine/cash?userCashRate='+userCashRate)}>立即提现</View>
      </View>
    )
  }
}

export default MineProfit
